<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" >
      <el-form-item label="物料编码" >
        <el-input
          v-model="queryParams.mNo"
          placeholder="请输入物料编码"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="物料名称" >
        <el-input
          v-model="queryParams.mName"
          placeholder="请输入物料名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="物料状态"  >
        <el-select
          v-model="queryParams.purchasingMethod"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="采购方式" >
        <el-select
          v-model="queryParams.mtype"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in cgfsOptions"
            :key="dict.dictValue"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="物料分类" >
        <el-select
          v-model="queryParams.typeId"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in fenleiList"
            :key="dict.id"
            :label="dict.cname"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="物料科室"  >
        <el-select
          v-model="queryParams.depOffId"
          placeholder="请选择"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in keshiList"
            :key="dict.id"
            :label="dict.depOffName"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>

        <el-button  type="primary" icon="el-icon-search" size="mini" @click="search">搜索</el-button>
        <el-button  type="success" icon="el-icon-plus" size="mini" @click="cgjhadd">新增</el-button>
        <el-button  type="info" icon="el-icon-upload2" size="mini"  @click="handleImport">导入</el-button>
        <el-button  type="primary" icon="el-icon-refresh" size="mini" @click="gengixnx">更新价格</el-button>
<!--        <el-button type="warning" icon="el-icon-download" size="mini">导出</el-button>-->
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="roleList" stripe border>
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <el-table-column align="center" label="科室"   property="depOffName" :show-overflow-tooltip="true"  ></el-table-column>

      <el-table-column align="center" label="物料编码" property="mno" :show-overflow-tooltip="true" width="150" ></el-table-column>
      <el-table-column align="center" label="物料名称"  property="mname" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="物料规格"  property="mmodel" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="分类名称"  property="typeName" :show-overflow-tooltip="true" ></el-table-column>

      <el-table-column align="center" label="单位"  property="unit" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="计划价"  property="planPrice" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="技术参数"  property="technicalParameters" :show-overflow-tooltip="true" v-if="false" ></el-table-column>
      <el-table-column align="center" label="采购方式"  property="mtype" :show-overflow-tooltip="true" width="150"  v-if="false">
        <template slot-scope="scope" style="text-align: center">
          <div style="padding-left: 5px;padding-right: 5px; background:#78BF34  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='1'" >招标采购</div>
          <div style="padding-left: 5px;padding-right: 5px; background:#9E71DC ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='2'">产业协同</div>
          <div style="padding-left: 5px;padding-right: 5px;background:#DEA11E  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='3'">战略采购</div>
          <div style="padding-left: 5px;padding-right: 5px;background:#9E71DC  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='4'">询比价</div>
          <div style="padding-left: 5px;padding-right: 5px;background:#9E71DC  ;color: white;height: 22px;display: inline-block" v-show="scope.row.mtype=='5'">长协</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="物料状态"  property="purchasingMethod" :show-overflow-tooltip="true" width="150" v-if="false">
        <template slot-scope="scope" style="text-align: center">
          <div style="background:#78BF34  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='1'" >正常</div>
          <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='2'">慎用</div>
          <div style="background:#DEA11E  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='3'">关闭</div>
          <div style="background:#9E71DC  ;color: white;width: 54px;height: 22px;display: inline-block" v-show="scope.row.purchasingMethod=='4'">新增</div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"

            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"

            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="search"
    />
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <kucun-Dialog v-if="kucunShow" :jihuaData="kuncunData" @callback="kucunBack"></kucun-Dialog>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/system/role";
  import kucunDialog from "./kucunDialog";
  import { getToken } from "@/utils/auth";
  import { listUser, getUser, delUser, addUser, updateUser, exportUser, resetUserPwd, changeUserStatus, importTemplate } from "@/api/system/user";

  export default {
    name: "Role",
    components:{
      kucunDialog
    },
    data() {
      return {

        kuncunData:{},
        kucunShow:false,
        // 遮罩层
        loading: false,
        // 总条数
        total: 0,
        // 角色表格数据
        roleList: [
          { jhdh:'CGJH2020000265',biaoti:'测试数据',cglx:'网购',cgsl:'99',jhje:'8888',cjrq:'',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'1',spjssj:'2020-10-02'},
          { jhdh:'CGJH2020000264',biaoti:'测试数据',cglx:'网购',cgsl:'99',jhje:'8888',cjrq:'',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'2',spjssj:'2020-10-02'},
          { jhdh:'CGJH2020000263',biaoti:'测试数据',cglx:'网购',cgsl:'99',jhje:'8888',cjrq:'',cjren:'季明聪',beizhu:'备注测试',dqjd:'当前节点',spzt:'3',spjssj:'2020-10-02'}
        ],
        // 日期范围
        dateRange: [],
        //科室
        keshiList:[],
        //采购方式
        cgfsOptions:[
          { value: '1',label: '招标采购'},
          { value: '2',label: '产业协同'},
          { value: '3',label: '战略采购'},
          { value: '4',label: '询比价'},
          { value: '5',label: '长协'},
        ],
        fenleiList:[],
        // 1正常 2慎用 3关闭 4新增
        statusOptions: [
          { value: '1',label: '正常'},
          { value: '2',label: '慎用'},
          { value: '3',label: '关闭'},
          { value: '4',label: '新增'},
        ],
        // 数据范围选项
        dataScopeOptions: [
          {
            value: "1",
            label: "全部数据权限"
          },
          {
            value: "2",
            label: "自定数据权限"
          },
          {
            value: "3",
            label: "本部门数据权限"
          },
          {
            value: "4",
            label: "本部门及以下数据权限"
          },
          {
            value: "5",
            label: "仅本人数据权限"
          }
        ],
        // 菜单列表
        menuOptions: [],
        // 部门列表
        deptOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          mNo: '',
          mName: '',
          mtype: '',
          typeId:'',
          depOffId:'',
          purchasingMethod:'',
        },
        // 表单参数
        form: {},
        defaultProps: {
          children: "children",
          label: "label"
        },
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/system/user/importData"
        },
      };
    },
    created() {
      this.search()
      this.getwlfl()
      this.getwlks()

    },
    methods: {
      //获取物料分类数据
      getwlfl:function(){
        request({
          url: '/system/classification/list',
          method: 'get',
          params: {
            pageNum:'1',
            pageSize:'10000',
          }
        }).then(response => {
          this.fenleiList = response.rows
        });

      },
      //获取物料科室数据
      getwlks:function(){
        request({
          url: '/system/off/list',
          method: 'get',
          params: {
            pageNum:'1',
            pageSize:'10000',
          }
        }).then(response => {
          this.keshiList = response.rows
        });
      },
      /** 下载模板操作 */
      importTemplate() {
        importTemplate().then(response => {
          this.download(response.msg);
        });
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
        this.getList();
      },
      /** 导入按钮操作 */
      handleImport() {
        this.upload.title = "用户导入";
        this.upload.open = true;
      },
      //新增
      cgjhadd:function () {
        var pp={
          name:'新增物料',
          leixng:'post',
        }
        this.kuncunData = pp
        this.kucunShow=true

      },
      //库存管理返回
      kucunBack:function(row){
        console.log('----------',row)
        if(row.code=='200'){
          this.$message({
            type: 'success',
            message: row.msg
          });
        }
        this.kucunShow = false
        this.search()

      },
      //查询
      search:function(){
        this.loading = true
        request({
          url: '/material/supplies/list',
          method: 'get',
          params:this.queryParams
        }).then(response => {
          this.loading = false
          this.roleList = response.rows
          this.total = response.total

        });
      },
      gengixnx:function(){
        request({
          url: '/material/supplies/putSuData',
          method: 'get',
        }).then(response => {
          this.$message({
            type: 'success',
            message: response.msg
          });
        });
      },
      /** 查询角色列表 */
      getList() {
        this.loading = true;
        listRole(this.addDateRange(this.queryParams, this.dateRange)).then(
          response => {
            this.roleList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      //表格编辑
      handleEdit:function (index,row) {
        console.log('编辑',row)
        var pp={
          name:'编辑物料',
          leixng:'put',
          row:row
        }
        this.kuncunData = pp
        this.kucunShow=true
      },
      //删除
      handleDelete:function (index,row) {
        this.$confirm('确认要删除当前物料吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.shanchu(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      shanchu:function(row){
        debugger
        request({
          url: '/material/supplies/del',
          method: 'post',
          data: {
            id:row.id,
            swid:row.swId,
            waid:row.waId
          }
        }).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.search()
        });
      },

    }
  };
</script>
